<html>
<head>
<title>Chromodoro Options</title>
<style>
body {
  background: #eee;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
}

h1 {
  font-size: 12px;
  text-align: center;
}

table {
  font-size: 10px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

th {
  font-weight: bold;
  text-align: right;
}

#buttons {
  text-align: right;
}
</style>
<script>
function option(name) {
  return document.getElementById(name);
}

function load() {
  option("work_duration_mins").value = localStorage["work_duration_mins"];
  option("rest_duration_mins").value = localStorage["rest_duration_mins"];
  option("enable_audio").checked = localStorage["enable_audio"] != "disabled";
}

function save() {
  localStorage["work_duration_mins"] = option("work_duration_mins").value;
  localStorage["rest_duration_mins"] = option("rest_duration_mins").value;
  localStorage["enable_audio"] = option("enable_audio").checked ? "enabled" : "disabled";

  // When we're in the IDLING state, we want the displayed countdown start to
  // update.
  var chromodoro = chrome.extension.getBackgroundPage();
  if (chromodoro.state == chromodoro.IDLING) {
    chromodoro.startIdling();
  }
  document.getElementById("save").disabled = true;

  /* Disabled for now; the popup can't shrink so it just looks bad.
  if (window.parent.closeOptions) {
    window.parent.closeOptions();
  }
  */
}

function invalidate() {
  document.getElementById("save").disabled = false;
}
</script>
</head>
<body onload="load()">

<h1>Chromodoro Options</h1>

<table>
  <tr>
    <th>&nbsp;</th>
    <td>
      <input type="checkbox" id="enable_audio" name="enable_audio" onchange="invalidate()">
      <label for="enable_audio">Enable ticking and alarm sounds</label>
    </td>
  <tr>
    <th>Work duration:</th>
    <td><input id="work_duration_mins" type="number" size="3" onchange="invalidate()"> minutes</td>
  </tr>
  <tr>
    <th>Rest duration:</th>
    <td><input id="rest_duration_mins" type="number" size="3" onchange="invalidate()"> minutes</td>
  </tr>
  <tr>
    <td id="buttons" colspan="2">
      <button id="save" onclick="save()" disabled="disabled">Save</button>
    </td>
  </tr>
</table>

</body>
</html>
